<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>初识Vue</title>
      <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
        初识Vue：
                1.<div id="root">是一个容器，容器中写的不是原始html代码，而是Vue的模板代码。
                2.所谓的模板代码，类似于React中的jsx，是html+js的混合体
                3.{{xxx}},xxx会自动读取data中的xxx属性，xxxx当表达式去解析
    -->
    <!--准备好一个容器-->
    <div id='root'>
        <h1>Hello,{{school.name.toUpperCase()}}</h1>
        <h1>学校坐落在：{{school.address}}</h1>
        <h1>我学的是：{{school.subject()}}学科</h1>
        <hr/>
        <h1>{{school.name,school.address}}</h1> <!-- 最终展示的是name -->
        <h1>{{school.name && school.address}}</h1> <!-- 最终展示的是address-->
        <h1>{{school.name ? 1 : 2}}</h1> <!-- 最终展示的是1-->
    </div>

    <script type="text/javascript">
        //创建一个Vue的实例对象,并传入配置对象
        const app = new Vue({
            el:'#root',    //el用于指定当前Vue实例为哪个容器服务，值是选择器字符串，选择的写法类似于jQuery
            data:{      //data是存储数据的地方，为root容器提供数据，值为一个对象，相当与React中的state
                school:{
						name:'atguigu',
						address:'宏福科技园综合楼',
						subject:()=>'前端'
					}
            }
        });
        
    </script>

  </body>
</html>